<template>
    <div class="select-module">
        <el-dialog title="选择试卷" :visible.sync="showScore" width="80%">
            <slot></slot>
            <el-form :inline="true" class="t-form">
                <el-form-item label="" v-if="actives.list">
                    <el-select v-model="form.activityId" placeholder="活动名称">
                        <el-option v-for="(act,index) in actives.list" :label="act.name" :value="act.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model="form.range_type" placeholder="类型">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="标准" :value="0"></el-option>
                        <el-option label="自定义" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model="form.timeType" placeholder="试卷类型">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(mater,index) in condition.termTypeList" :label="mater.name" :value="mater.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.levelId" placeholder="班型">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="item in condition.levelObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" class="search-btn">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table class="line-table" :data="examList" header-align="center">
                <el-table-column prop="name" label="试卷名称" align="center" width="400">
                    <template scope="scope">
                        <span class="ques-name">
                            <svg v-if="scope.row.examType===0" class="icon jian" aria-hidden="true">
                                <use xlink:href="#icon-jian"></use>
                            </svg>
                            <svg v-if="scope.row.examType===1" class="icon xuan" aria-hidden="true">
                                <use xlink:href="#icon-xuan"></use>
                            </svg>
                            {{scope.row.name}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="activityName" label="活动名称" align="center"> </el-table-column>
                <el-table-column prop="timeTypeName" label="试卷类型" align="center"> </el-table-column>
                <el-table-column prop="recordNum" label="已录人数" align="center"> </el-table-column>
                <el-table-column label="是否区分文理科" align="center">
                    <template scope="scope">
                        {{scope.row.wal===0?'通用':scope.row.wal===1?'文科':scope.row.wal===2?'理科':''}}
                    </template>
                </el-table-column>
                <el-table-column label="类型" align="center">
                    <template scope="scope">
                        {{scope.row.rangeType===0?'标准':'自定义'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template scope="scope">
                        <router-link v-if="type!=='change'" :to="{path:'/main/system/class/score',query:{moduleId:scope.row.id,classId:form.classId}}" class="set-score">录分</router-link>
                        <span class="set-score" v-else @click="changeModule(scope.row)">录分</span>
                    </template>
                </el-table-column>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import VPagination from "../../common/Pagination"
import { mapState, mapActions, mapGetters } from 'vuex'
import io from 'lib/io'
export default {
    name: 'select-module',
    props: ['type'],
    components: {
        VPagination
    },
    data() {
        return {
            form: {
                classId: null,
                levelId: null,
                range_type: null,
                timeType: null,
                activityId:null
            },
            examList: [],
            showScore: false,
            actives:{}
        }
    },
    computed: {
        ...mapState(['condition'])
    },
    methods: {
        ...mapActions(['findBaseLevelPage', 'findTimeTypeData']),
        changeModule(row) {
            this.$emit('change', row)
        },

    async getActiveList(row) {
      let {data}=await io.post6(io.examModelActivityList,{pageIndex: 1,pageSize: 1000000,isUse:1})
      if(data.success){
        this.actives=data.data
        this.form.activityId=this.type==='change'?row.activeId:data.data.list[0]&&data.data.list[0].id
        console.log()
        if(!this.form.activityId){
            this.$message('该班级暂无考试活动，请先添加活动')
            return
        }
        this.setScore(row)
      }
    },
        async setScore(row) {
            let opt
            if (row) {
                this.form.levelId = row.baseLevelId
                opt = { ...this.form, classId: row.id }
            } else {
                opt = { ...this.form }
            }
            let { data } = await io.post6(io.classExamModelList, opt)
            if (data.success) {
                this.examList = data.data
                if (!row) {
                    return
                }
                this.form.classId = opt.classId
                this.showScore = true
                this.init()
            }
        },
        init() {
            this.findBaseLevelPage({ pageIndex: 1, pageSize: 1000000 })
            this.findTimeTypeData({})
        },
        search() {
            this.setScore()
        },
        changeStatus(status){
            this.showScore=status
        }
    }
}
</script>
<style lang="stylus" scoped>
.t-form
    padding-top 20px
    padding-left 20px
    background #f7f7f7
    margin-top 10px
.set-score
    cursor pointer
    color #0084bb
    &:hover
        color #01cdbe
.ques-name
    position relative
    padding-left 18px
    .icon
        position absolute
        top -17px
        left -20px
        font-size 47px
        margin 0
        z-index 1
        color #ff9000
        &.xuan
            color #01cdbe
</style>
<style lang="stylus">
.select-module
    .el-dialog
        .cell
            overflow visible
    .el-select
        width 190px
</style>
